<template>
  <cl-view-group ref="ViewGroup">
    <template #item-name="{ item }"> {{ item.name }}</template>

    <template #right>
      <cl-crud ref="Crud">
        <cl-row>
          <!-- 刷新按钮 -->
          <cl-refresh-btn/>
          <!-- 新增按钮 -->
          <cl-add-btn/>
          <!-- 批量删除 -->
          <cl-multi-delete-btn/>
          <cl-import-btn tips="导入说明：请先下载导入模板，注意模板前两行为导入说明，正式导入时候需要删掉。从第三行开始为导入正文，第一列时间格式为：yyyy-MM-dd" :on-submit="onSubmit" template="/指标导入模板.csv" />
          <cl-flex1/>
          <!-- 关键字搜索 -->
          <cl-search-key placeholder="搜索名称"/>
          <cl-export-btn :columns="Table?.columns" :data="onExportData"/>
        </cl-row>

        <cl-row>
          <!-- 数据表格 -->
          <cl-table ref="Table"/>
        </cl-row>

        <cl-row>
          <cl-flex1/>
          <cl-pagination/>
        </cl-row>
        <!-- 新增、编辑 -->
        <cl-upsert ref="Upsert" />
      </cl-crud>
    </template>
  </cl-view-group>
</template>

<script lang="ts" name="crawler-result" setup>
import {setFocus, useCrud, useTable, useUpsert} from "@cool-vue/crud";
import {useCool} from "/@/cool";
import {computed} from "vue";
import {useViewGroup} from "/@/plugins/view";
import {ElMessage, ElMessageBox} from "element-plus";

const {service} = useCool();

const {ViewGroup} = useViewGroup({
  label: "分组",
  title: "市场数据",
  service: service.crawler.set,
  onSelect(item) {
    refresh({
      groupId: item.id,
      page: 1
    });
  },
  onEdit() {
    return {
      width: "800px",
      props: {
        labelWidth: "60px"
      },
      items: [
        {
          prop: "enName",
          label: "英文描述",
          span: 12,
          required: true,
          component: {
            name: "el-input"
          }
        },
        {
          prop: "name",
          label: "中文描述",
          span: 12,
          required: true,
          component: {
            name: "el-input"
          }
        }
      ]
    };
  }
});

// cl-table
const Table = useTable({
  columns: [
    {type: "selection"},
    {label: "指标编码", prop: "quotaCode", align: "left", width: 150},
    {label: "指标名称", prop: "quotaName", align: "left", width: 200},
    {label: "指标值", prop: "quotaValue", align: "left", width: 200},
    {
      label: "数据来源",
      prop: "sourceUrl",
      align: "left",
      width: 500,
      showOverflowTooltip: true
    },
    {label: "收集时间", prop: "collectedAt", align: "left", width: 200},
    {label: "创建时间", prop: "createdAt", align: "left", sortable: "custom", width: 200},
    {
      label: "操作",
      type: "op",
      width: 180,
      buttons: ["edit", "delete"]
    }
  ]
});

// cl-crud
const Crud = useCrud({
  service: service.crawler.result,
  onRefresh(params, {render}) {
    service.crawler.result
        .page({
          ...params
        })
        .then((res) => {
          // 渲染数据
          render(res["list"], {
            size: Number(res["pagination"].size),
            page: Number(res["pagination"].page),
            total: Number(res["pagination"].total)
          });
        });
  }
});


// cl-upsert
const Upsert = useUpsert({
  dialog: {
    width: "800px"
  },

  items: [
    {
      prop: "quotaCode",
      label: "指标",
      required: true,
      component: {
        name: "el-input"
      }
    },
    {
      prop: "quotaName",
      label: "指标名称",
      required: false,
      component: {
        name: "el-input"
      }
    },
    {
      prop: "quotaValue",
      label: "指标",
      span: 12,
      required: true,
      component: {
        name: "el-input"
      }
    },
    {
      prop: "collectedAt",
      label: "收集时间",
      span: 12,
      required: true,
      component: {
        name: "el-date-picker"
      }
    },
    {
      prop: "sourceUrl",
      label: "数据来源",
      required: false,
      component: {
        name: "el-input"
      }
    }
  ],
  onSubmit(data, { next }) {
    next({
      ...data,
      groupId: ViewGroup.value?.selected?.id
    });
  },
  plugins: [setFocus("name")]
});


// 刷新
function refresh(params?: any) {
  // console.log(JSON.stringify(params));
  Crud.value?.refresh(params);
}

function onExportData(params: any) {
  // 根据参数导出
  return service.crawler.result.list(params).then((res) => res);
}

// 提交事件，根据自己的情况设置格式和接口
function onSubmit(data: any, { next, done }) {
  service.crawler.result
      .import(data)
      .then(() => {
        // 显示弹窗提示
        ElMessageBox.alert('导入成功', '提示', {
          confirmButtonText: '确定',
          type: 'success'
        }).then(() => {
          Crud.value?.refresh(); // 刷新表格
        });
        done();
      })
      .catch((err) => {
        ElMessage.error(err.message);
        done();
      });
}

</script>

<style lang="scss" scoped>
.form-value {
  .op {
    margin-top: 10px;
  }
}
</style>
